import React, { useEffect } from 'react';
import {
  Cascader,
  Form,
  Input,
  Button,
  Select,
  DatePicker,
  InputNumber,
  Switch,
  Slider,
  TimePicker,
} from 'antd';
import { BetaSchemaForm, ProFormSelect } from '@ant-design/pro-form';
import IproFormProps from './interface';

const { RangePicker } = DatePicker;

export default (props: IproFormProps): JSX.Element => {
  const { items, formParameter, actionParameter, betaSchemaFormJson } = props;

  const formItems = () => {
    const itemDom: Array<JSX.Element> = [];
    (items || []).forEach((item, index) => {
      itemDom.push(
        <div key={index}>
          {item.type === 'Input' && (
            <Form.Item {...item.parameter}>
              <Input {...item.inputParameter} />
            </Form.Item>
          )}
          {item.type === 'Input.Password' && (
            <Form.Item {...item.parameter}>
              <Input.Password {...item.inputParameter} />
            </Form.Item>
          )}
          {item.type === 'Input.TextArea' && (
            <Form.Item {...item.parameter}>
              <Input.TextArea {...item.textAreaParameter} />
            </Form.Item>
          )}
          {item.type === 'Cascader' && (
            <Form.Item {...item.parameter}>
              <Cascader {...item.cascaderParameter} />
            </Form.Item>
          )}
          {item.type === 'Select' && (
            <Form.Item {...item.parameter}>
              <Select {...item.selectParameter}>
                {item.selectParameter?.optionArr.map((item) => (
                  <Select.Option value={item.value} key={item.value}>
                    {item.label}
                  </Select.Option>
                ))}
              </Select>
            </Form.Item>
          )}
          {item.type === 'DatePicker' && (
            <Form.Item {...item.parameter}>
              <DatePicker {...item.datePickerParameter} />
            </Form.Item>
          )}
          {item.type === 'RangePicker' && (
            <Form.Item {...item.parameter}>
              <RangePicker {...item.rangePickerParameter} />
            </Form.Item>
          )}
          {item.type === 'InputNumber' && (
            <Form.Item {...item.parameter}>
              <InputNumber {...item.inputNumberParameter} />
            </Form.Item>
          )}
          {item.type === 'Switch' && (
            <Form.Item {...item.parameter}>
              <Switch {...item.switchParameter} />
            </Form.Item>
          )}
          {item.type === 'Slider' && (
            <Form.Item {...item.parameter}>
              <Slider {...item.sliderParameter} />
            </Form.Item>
          )}
          {item.type === 'TimePicker' && (
            <Form.Item {...item.parameter}>
              <TimePicker {...item.timePickerParameter} />
            </Form.Item>
          )}
        </div>,
      );
    });
    return itemDom;
  };

  return (
    <>
      {betaSchemaFormJson ? (
        <BetaSchemaForm {...betaSchemaFormJson} />
      ) : (
        <Form {...formParameter}>
          {formItems()}
          {actionParameter}
        </Form>
      )}
    </>
  );
};
